<template>
  <div class="container">
    <el-upload
      ref="upload"
      :limit="1"
      accept=".xlsx, .xls"
      :headers="upload.headers"
      :action="upload.url"
      :disabled="upload.isUploading"
      :on-progress="handleFileUploadProgress"
      :on-success="handleFileSuccess"
      :auto-upload="false"
      :http-request="customUploadRequest"
      drag
      class="upload"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip text-center" slot="tip">
        <span>仅允许导入xls、xlsx格式文件。</span>
        <el-link
          type="primary"
          :underline="false"
          style="font-size: 12px; vertical-align: baseline"
          @click="importTemplate"
          >下载模板</el-link
        >
      </div>
    </el-upload>
  </div>
</template>

<script>
import { exportExecl } from "@/utils/export-execl";
import { getToken } from "@/utils/auth";
import axios from "axios"; // 引入 axios

export default {
  name: "",
  components: {},
  props: {
    upurl: {
      type: String,
      default: "",
    },
    downurl: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      upload: {
        open: false,
        title: "",
        isUploading: false,
        headers: { Authorization: "Bearer " + getToken() },
        url: process.env.VUE_APP_BASE_API + "",
      },
      downloadurl: "",
    };
  },
  watch: {
    upurl: {
      handler(val) {
        if (val) {
          this.upload.url = process.env.VUE_APP_BASE_API + val;
        }
      },
      deep: false,
      immediate: true,
    },
    downurl: {
      handler(val) {
        if (val) {
          this.downloadurl = process.env.VUE_APP_BASE_API + val;
        }
      },
      deep: false,
      immediate: true,
    },
  },
  created() {
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  },
  methods: {
    importTemplate() {
      exportExecl(
        this.title,
        this.downloadurl + "?fileName=historyMonthTemplate.xlsx",
        {},
        this
      );
    },
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      if (response.code === 200) {
        this.$message.success("操作成功");
        this.$refs.upload.clearFiles();
        this.$emit("input", response.data);
        this.handleClose(true);
      } else {
        this.$message.error(response.msg);
      }
    },
    sub() {
      this.$refs.upload.submit();
    },
    // 自定义上传请求
    customUploadRequest(option) {
      const formData = new FormData();
      formData.append("file", option.file); // 文件字段名根据后端要求修改

      this.upload.isUploading = true;

      axios({
        url: this.upload.url,
        method: "put", // 自定义请求方式，比如 post、put 等
        headers: this.upload.headers,
        data: formData,
        onUploadProgress: (progressEvent) => {
          const percent = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
          option.onProgress({ percent }); // 触发进度条事件
        },
      })
        .then((response) => {
          option.onSuccess(response.data); // 成功回调
          this.upload.isUploading = false;
        })
        .catch((error) => {
          option.onError(error); // 错误回调
          this.upload.isUploading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.upload {
  text-align: center;
}
</style>
